<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>NewProject-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>
    <link rel="stylesheet" th:href="@{/assets/js/bootstrap-datepicker-master/css/bootstrap-datepicker3.standalone.css}">
</head>
<body>
<div class="wrapper">
    <div th:replace="commom/bar :: topbar"></div>
    <!-- Sidebar -->
    <div th:replace="commom/bar :: sidebar"></div>
    <!-- End Sidebar -->
    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="page-header">
                    <h4 class="page-title">新建项目</h4>
                    <ul class="breadcrumbs">
                        <li class="nav-home">
                            <a href="#">
                                <i class="flaticon-home"></i>
                            </a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">Base</a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">Panels</a>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">项目详情</div>
                            </div>
                            <div class="card-body">
                                <form th:action="@{/projects}" method="post">
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <div class="form-group form-group-default">
                                                <label>项目名称</label>
                                                <input id="name" name="name" type="text"
                                                       class="form-control" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group form-group-default">
                                                <label>项目类型</label>
                                                <select class="form-control" id="type" name="type">
                                                    <option value="Web应用开发">Web应用开发</option>
                                                    <option value="大数据">大数据</option>
                                                    <option value="物联网">物联网</option>
                                                    <option value="人工智能">人工智能</option>
                                                    <option value="微信小程序">微信小程序</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <div class="form-group form-group-default">
                                                <label>计划开始时间</label>
                                                <input type="text" class="form-control" id="plannedStartTime" name="plannedStartTime" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group form-group-default">
                                                <label>计划结束时间</label>
                                                <input type="text" class="form-control" id="plannedEndTime" name="plannedEndTime" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-12">
                                            <div class="form-group form-group-default">
                                                <label>项目描述</label>
                                                <textarea class="form-control" id="characterization"
                                                          name="characterization"
                                                          placeholder="这家伙很懒，什么都没有留下" rows="5"
                                                          autocomplete="off"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-right mt-3 mb-3">
                                        <button class="btn btn-secondary" type="submit">新建</button>
                                        <button class="btn btn-primary" type="reset">重置</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">我的项目</div>
                            </div>
                            <div class="card-body">
                                <div class="col-md-12 row" th:each="myproject:${myprojects}" th:fragment="div1"
                                     id="div1">
                                    <div class="col-md-12">
                                        <a th:href="@{/projects_view(projectId=${myproject.projectId},userId=${#authentication.principal.id})}">
                                            <h2 style="color: #145180">
                                                <i class="fas fa-file-alt"></i>&nbsp;[[${myproject.projectName}]]
                                            </h2>
                                        </a>
                                        <span style="color: #4e555b">
                                            <i class="fas fa-user-tie"></i>项目管理员：[[${myproject.chargeUser}]]
                                        </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span style="color: #4e555b">
                                            <i class="fab fa-codiepie"></i>&nbsp;项目进度：[[${myproject.projectSchedule.schedule}]]
                                        </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span style="color: #4e555b">
                                            <i class="far fa-arrow-alt-circle-up"></i>上传次数：[[${myproject.codeUpdateCount}]]
                                        </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span style="color: #4e555b">
                                            <i class="far fa-arrow-alt-circle-up"></i>我的上传次数：[[${myproject.myUpdateCount}]]
                                        </span>
                                        <div class="dropdown-divider"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
<!--公共JS-->
<th:block th:replace="commom/bar :: commom_js"/>
<!--公共JS-->
<th:block th:replace="commom/bar :: nav_js"/>

<script th:src="@{/assets/js/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/assets/js/bootstrap-datepicker-master/locales/bootstrap-datepicker.zh-CN.min.js}"></script>

<!--创建项目js-->
<script type="text/javascript">
    $(function newProjects() {
        var chargeUserId = $("#chargeUserId").val();
        var name = $("#name").val();
        var type = $("#type").val();
        var characterization = $("#characterization").val();
        if (name === "" || characterization === "") {
            return;
        }
        $.ajax({
            type: "POST",
            url: "/projects",
            data: {
                "chargeUserId": chargeUserId,
                "name": name,
                "type": type,
                "characterization": characterization
            },
            success: function (json) {
                if (json.ok) {
                    swal("创建成功！", {
                        icon: "success",
                        buttons: false,
                        timer: 1500,
                    });
                    setTimeout(function () {
                        location.href = json.data;
                    }, 1500);
                } else {
                    swal("创建失败！", json.message, {
                        icon: "error",
                        buttons: {
                            confirm: {
                                className: 'btn btn-danger'
                            }
                        },
                    });
                }
            },
        })
    })
</script>
<!--时间插件-->
<script type="text/javascript">
    $('#plannedStartTime').datepicker({
        format: 'yyyy/mm/dd',
        language: "zh-CN"
    })
    $('#plannedEndTime').datepicker({
        format: 'yyyy/mm/dd',
        language: "zh-CN"
    })
</script>
</body>
</html>